<template>
	<view>
		<view class="template_card">
			<card1 v-if="info.type == 1" :info="info" :user="user" :imgUrl="imgUrl" :userInfo="userInfo" ref="cardRef1" :type="type"/>
			<card2 v-if="info.type == 2" :info="info" :user="user" :imgUrl="imgUrl" :userInfo="userInfo" ref="cardRef2" :type="type"/>
      		<card3 v-if="info.type == 3" :info="info" :user="user" :imgUrl="imgUrl" :userInfo="userInfo" ref="cardRef3" :type="type"/>
			<image :src="ossUrl + `/static/image/vip/${userInfo.vip === 1 ? 4 : 3}.png`" class="card-vip" v-if="!is_vip && userInfo.vip === 1" mode="widthFix"></image>
		</view>
	</view>

</template>

<script>
	import card1 from './template/template_1.vue'
	import card2 from './template/template_2.vue'
  	import card3 from './template/template_3.vue'
	export default {
		components: {
			card1,
			card2,
			card3
		},
		props:['type','is_vip'],//1编辑视角 2访客视角
		data() {
			return {
				info: {
					Identity_color: "",
					Template_img: "",
					address_img: "",
					contact_color: "",
					cover_img: "",
					img: null,
					mailbox_img: "",
					name_color: "",
					phone_img: "",
					type: "1",
					we_chat_img: ""
				},
				user: {
					company: "",
					mailbox: "",
					mobile: "",
					name: "",
					nickname: "",
					wechat_number: ""
				},
				imgUrl: '',
				userInfo: {}
			}
		},
		methods: {
			show(info,user,imgUrl,userInfo={}) {
			
				//info
				this.info = {
					Identity_color: info.Identity_color || '',
					Template_img: info.Template_img || '',
					address_img: info.address_img || '',
					contact_color: info.contact_color || '',
					cover_img: info.cover_img || '',
					img: null,
					mailbox_img: info.mailbox_img || '',
					name_color: info.name_color || '',
					phone_img: info.phone_img || '',
					type: info.type || 1,
					//type: 3,
					we_chat_img: info.we_chat_img || '',
					lng: info.lng || '',
					lat: info.lat || '',
					address: info.address || ''
				}
				this.user = {
					company: user.company || '',
					mailbox: user.mailbox || '',
					mobile: user.mobile || '',
					name: user.name || '',
					nickname: user.nickname || '',
					wechat_number: user.wechat_number || '',
					WeChat_QR_code: user.WeChat_QR_code || ''
				}
				this.imgUrl = imgUrl
				this.userInfo = userInfo
			},
			async submit(){
				const res = await this.$refs['cardRef'+this.info.type].submit()
		
				return res
			}
		}
	}
</script>

<style lang="scss" scoped>
	.template_card {
		width: 690rpx;
		height: 380rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 8rpx 0rpx rgba(14, 67, 44, 0.15);
		border-radius: 30rpx;
		position: relative;
	}
	.card-vip {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		z-index: 99;
		width: 40rpx;
	}
	
</style>